<j:ebuttons
  searchPlaceholder="请输入用户名"
  [editState]="editState"
  [submitBtnVisible]="false"
  [backBtnVisible]="false"
  [approveBtnVisible]="false"
  [unapproveBtnVisible]="false"
  [approveDividerVisible]="false"
  (saveBtnClick)="save()"
  (giveupBtnClick)="giveup()"
  (newBtnClick)="new()"
  (copyBtnClick)="copy()"
  (deleteBtnClick)="delete()"
  (selectBtnClick)="select()"
  (listBtnClick)="list()"
  (refreshBtnClick)="refresh()"
  (searchBtnClick)="search($event)"
>
  <button
    nz-button
    beforeRefreshBtn
    nzType="link"
    [disabled]="permissionBtnDisabled"
    (click)="editPermission()"
  >
    权限
  </button>
  <nz-divider beforeRefreshBtn nzType="vertical"></nz-divider>
</j:ebuttons>
<nz-card class="main-card">
  <form nz-form [formGroup]="validateForm">
    <nz-tabset nzType="card">
      <nz-tab [nzTitle]="'基本'">
        <div nz-row>
          <div nz-col [nzSpan]="8">
            <nz-form-item>
              <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="userName">
                用户名
              </nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24">
                <input
                  nz-input
                  id="userName"
                  formControlName="userName"
                  placeholder="请输入用户名"
                  [readonly]="userNameInputDisabled"
                  [ngClass]="{ 'ant-input-disabled': userNameInputDisabled }"
                />
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col [nzSpan]="8"></div>
          <div nz-col [nzSpan]="8"></div>
          <div nz-col [nzSpan]="8" *ngIf="showPasswordInput">
            <nz-form-item>
              <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="password">
                密码
              </nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24">
                <input
                  nz-input
                  type="password"
                  autocomplete="new-password"
                  id="password"
                  formControlName="password"
                  placeholder="请输入密码"
                />
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col [nzSpan]="8" *ngIf="showPasswordInput"></div>
          <div nz-col [nzSpan]="8" *ngIf="showPasswordInput"></div>
          <div nz-col [nzSpan]="8">
            <nz-form-item>
              <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="name"> 姓名 </nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input id="name" formControlName="name" placeholder="请输入姓名" />
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col [nzSpan]="8"></div>
          <div nz-col [nzSpan]="8"></div>
          <div nz-col [nzSpan]="8">
            <nz-form-item>
              <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="email"> 邮箱 </nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input id="email" formControlName="email" placeholder="请输入邮箱" />
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col [nzSpan]="8"></div>
          <div nz-col [nzSpan]="8"></div>
          <div nz-col [nzSpan]="8">
            <nz-form-item>
              <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="phoneNumber">
                电话
              </nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24">
                <input
                  nz-input
                  formControlName="phoneNumber"
                  id="phoneNumber"
                  placeholder="请输入电话"
                />
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col [nzSpan]="8"></div>
          <div nz-col [nzSpan]="8"></div>
          <div nz-col [nzSpan]="8">
            <nz-form-item>
              <nz-form-label [nzSpan]="8" [nzNoColon]="true"></nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24">
                <label nz-checkbox formControlName="lockoutEnabled">登录失败,账户被锁定</label>
                <label nz-checkbox formControlName="isActive">启用</label>
              </nz-form-control>
            </nz-form-item>
          </div>
        </div>
      </nz-tab>
      <nz-tab [nzTitle]="'角色信息'">
        <nz-checkbox-wrapper class="roles-wrapper">
          <div nz-row>
            <div nz-col nzSpan="4" *ngFor="let role of roles" class="role-checkbox">
              <label nz-checkbox [nzValue]="role.value" [formControl]="role.formControl">
                {{ role.label }}
              </label>
            </div>
          </div>
        </nz-checkbox-wrapper>
      </nz-tab>
    </nz-tabset>
  </form>
</nz-card>
